feat: animations, transitions, and UI enhancements - #24

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== package files ==\n'
git ls-files 'package.json' 'pnpm-lock.yaml' 'yarn.lock' 'package-lock.json' 'src/**/package.json' | sed -n '1,120p'

printf '\n== tailwind references ==\n'
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' 'tailwindcss|bg-gradient-to-r|bg-linear-to-r' .

printf '\n== file under review context ==\n'
sed -n '210,235p' src/features/marketing/components/course-detail-content-section.tsx

Repository: Smartlify07/Modern-Advocates

Length of output: 6980

🌐 Web query:

Tailwind CSS v4 bg-gradient-to-r removed alias bg-linear-to-r documentation

💡 Result:

In Tailwind CSS v4, the former bg-gradient-to-* utilities have been renamed to bg-linear-to-* [1][2][3]. This was a breaking change introduced to align class names with the native CSS linear-gradient function and to make room for new gradient primitives, specifically radial and conic gradients [1][2][3]. There is no alias or legacy support for the old bg-gradient-to-* class names in v4; they have been completely replaced by the new bg-linear-* syntax [2][4]. Key points regarding this change: - Renaming: Classes like bg-gradient-to-r have become bg-linear-to-r [2][4]. - Expanded Functionality: The new naming structure accommodates additional types, such as bg-radial and bg-conic [2][3]. - Gradient Stops: The existing color stop utilities (from-, via-, to-*) remain compatible and function identically with the new linear gradient classes [2][4]. - Migration: Official documentation provides guidance on updating these classes, and automated migration tools are available to help transition existing projects from the v3 syntax to the v4 syntax [1][5]. Because these changes involve class names, they may need to be manually updated in dynamic string concatenations that automated tools might miss [2].

Citations:

• 1: Template migrations: Migrate bg-gradient-* utilities to bg-linear-* tailwindlabs/tailwindcss#14537
• 2: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
• 3: https://tailwindcss.com/blog/tailwindcss-v4
• 4: https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/
• 5: https://tailwindcss.com/docs/upgrade-guide

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
import json, os, re
for p in ['package.json','pnpm-lock.yaml','yarn.lock','package-lock.json']:
    if os.path.exists(p):
        print(f'== {p} ==')
        if p.endswith('.json'):
            data=json.load(open(p))
            for k in ['dependencies','devDependencies','peerDependencies']:
                if k in data and 'tailwindcss' in data[k]:
                    print(k, data[k]['tailwindcss'])
        else:
            # show tailwind version mentions around first occurrences
            with open(p, 'r', encoding='utf-8', errors='ignore') as f:
                txt=f.read()
            for m in re.finditer(r'tailwindcss@[^:\n ]+|tailwindcss[^@\n ]*@[^:\n ]+', txt):
                print(m.group(0))
                break
PY

Repository: Smartlify07/Modern-Advocates

Length of output: 249

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Minimal, read-only checks for Tailwind version and relevant utility usage.
if [ -f package.json ]; then
  echo '== package.json =='
  cat package.json | python3 - <<'PY'
import json, sys
data=json.load(sys.stdin)
for k in ['dependencies','devDependencies','peerDependencies']:
    if k in data and 'tailwindcss' in data[k]:
        print(k, data[k]['tailwindcss'])
PY
fi

echo '== matches =='
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' 'bg-gradient-to-r|bg-linear-to-r|tailwindcss' .

Repository: Smartlify07/Modern-Advocates

Length of output: 906

🌐 Web query:

Tailwind CSS v4 bg-gradient-to-r alias removed bg-linear-to-r documentation "legacy class aliases"

💡 Result:

In Tailwind CSS v4, the bg-gradient-* class aliases used in v3 were removed and replaced with the bg-linear-* naming convention [1][2][3]. This change was implemented to better align Tailwind’s utility naming with native CSS functions (such as linear-gradient()) and to accommodate new gradient types, specifically bg-radial and bg-conic [2][3]. Key points regarding this change: - Renaming: Classes such as bg-gradient-to-r have been replaced by bg-linear-to-r [1][4]. - Migration: Tailwind provides an official upgrade tool, @tailwindcss/upgrade, which automatically updates legacy v3 class names (including gradient utilities) to their v4 equivalents during the migration process [1][5][6]. - Reasoning: Beyond simple renaming, v4 introduces expanded gradient capabilities, including support for arbitrary linear gradient angles (e.g., bg-linear-[125deg]) and gradient interpolation modifiers (e.g., /srgb, /oklch), which are conceptually clearer under the bg-linear-* namespace [7][2][3]. Documentation for these utilities can be found in the official Tailwind CSS background-image documentation, which lists the modern bg-linear-* utilities [8].

Citations:

• 1: Template migrations: Migrate bg-gradient-* utilities to bg-linear-* tailwindlabs/tailwindcss#14537
• 2: https://tailwindcss.com/blog/tailwindcss-v4
• 3: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
• 4: https://designrevision.com/blog/tailwind-4-migration
• 5: Ensure @tailwindcss/upgrade runs on Tailwind CSS v4 projects and is idempotent tailwindlabs/tailwindcss#17717
• 6: https://blog.elunari.uk/tailwind-css-v4-migration-guide
• 7: tailwindlabs/tailwindcss@7b63886
• 8: https://tailwindcss.com/docs/background-image

🌐 Web query:

site:tailwindcss.com bg-gradient-to-r bg-linear-to-r Tailwind v4 legacy class aliases removed

💡 Result:

In Tailwind CSS v4, the class naming convention for gradients has been updated. The previous bg-gradient-* utility classes have been renamed to bg-linear-* [1][2]. Specifically, the bg-gradient-to-r class from Tailwind v3 has been replaced by bg-linear-to-r in v4 [3][1]. While v4 introduces these updated names to support expanded gradient functionality—such as linear gradient angles (e.g., bg-linear-45) and interpolation modifiers (e.g., bg-linear-to-r/oklch)—it does not necessarily imply a blanket removal of all legacy aliases in the framework's core; however, for gradients specifically, the documentation emphasizes the use of the new bg-linear-* naming convention [3][1]. You should update your codebase to use the bg-linear-* variants to benefit from the new API features and ensure consistency with v4 [1][2].

Citations:

• 1: https://tailwindcss.com/blog/tailwindcss-v4
• 2: https://v3.tailwindcss.com/docs/v4-beta
• 3: https://tailwindcss.com/docs/background-image

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== package manifests ==\n'
git ls-files 'package.json' 'pnpm-lock.yaml' 'yarn.lock' 'package-lock.json' 'src/**/package.json' | sed 's#^`#-` #'

printf '\n== tailwind references ==\n'
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' 'tailwindcss|bg-gradient-to-|bg-linear-to-' .

printf '\n== target file excerpt ==\n'
sed -n '70,100p' src/features/marketing/components/course-detail-hero-section.tsx

Repository: Smartlify07/Modern-Advocates

Length of output: 8023

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== package.json ==\n'
sed -n '1,220p' package.json

printf '\n== lockfile hits ==\n'
rg -n 'tailwindcss@|tailwindcss' pnpm-lock.yaml package-lock.json yarn.lock 2>/dev/null || true

Repository: Smartlify07/Modern-Advocates

Length of output: 5520

🌐 Web query:

Tailwind CSS v4 gradient utilities bg-gradient-to-r bg-linear-to-r documentation

💡 Result:

In Tailwind CSS v4, the gradient system has been overhauled to align with native CSS syntax, resulting in a breaking change where the former bg-gradient-to-* utilities have been replaced by bg-linear-to-* [1][2][3]. Key changes and usage in v4: 1. Renamed Utilities: The bg-gradient-to-* prefix used in v3 is removed [3]. You must now use bg-linear-to-* for linear gradients (e.g., bg-linear-to-r for a left-to-right gradient) [4][1][2]. 2. Directional and Angle Support: - Predefined cardinal and diagonal directions remain available (e.g., bg-linear-to-t, bg-linear-to-br, bg-linear-to-l) [4][5]. - You can now specify explicit angles directly using the bg-linear-* utility (e.g., bg-linear-45 for a 45-degree angle) [1][5][2]. - Arbitrary angle values are supported via square bracket syntax (e.g., bg-linear-[125deg]) [6][7]. 3. Gradient Stops: The color stop utilities (from-*, via-*, and to-*) function identically to v3 [1][3]. You combine them with the base gradient utility to define the colors and their positions (e.g., bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500) [4][7][5]. 4. Interpolation Modes: Tailwind v4 defaults to oklab color interpolation, which provides smoother, more vibrant gradients compared to traditional sRGB [1][7][2]. You can override this using interpolation modifiers on the utility class, such as bg-linear-to-r/srgb, bg-linear-to-r/oklch, or bg-linear-to-r/hsl [4][7][2]. 5. Expanded Gradient Types: In addition to linear gradients, v4 introduces bg-radial and bg-conic utilities to support radial and conic gradients, respectively [1][2][3]. To migrate from v3, you can perform a search-and-replace for bg-gradient-to- with bg-linear-to- across your project [3].

Citations:

• 1: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
• 2: https://tailwindcss.com/blog/tailwindcss-v4
• 3: https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/
• 4: https://tailwindcss.com/docs/background-image
• 5: https://windybase.com/blog/how-to-use-gradients-in-tailwind-css
• 6: tailwindlabs/tailwindcss@7b63886
• 7: https://stevekinney.com/courses/tailwind/gradients

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== footer.tsx excerpt ==\n'
sed -n '1,180p' src/features/marketing/components/footer.tsx

printf '\n== Tailwind references ==\n'
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'tailwind|bg-gradient-to-r|bg-linear-to-r|`@tailwind`|tailwindcss' .

printf '\n== package manifests ==\n'
for f in package.json pnpm-lock.yaml yarn.lock package-lock.json; do
  if [ -f "$f" ]; then
    printf '\n-- %s --\n' "$f"
    sed -n '1,220p' "$f"
  fi
done

Repository: Smartlify07/Modern-Advocates

Length of output: 21473

🌐 Web query:

Tailwind CSS v4 gradient direction utility bg-gradient-to-r vs bg-linear-to-r official docs

💡 Result:

In Tailwind CSS v4, the bg-gradient-to-* utility family has been renamed to bg-linear-to-* [1][2]. This change was implemented to better align the utility names with the underlying native CSS linear-gradient() function and to support a broader suite of gradient types, including the new bg-radial and bg-conic utilities [1][3]. Key points regarding the transition: - Replacement: bg-linear-to-r is the canonical v4 equivalent of the legacy v3 bg-gradient-to-r [1][2]. The bg-gradient-to-* classes no longer exist in v4 [1][4]. - Functionality: Both utilities produce identical CSS output [1]. The color stop utilities (from-*, via-*, and to-*) remain unchanged and function exactly as they did in v3 [1][4]. - Enhanced Features: Tailwind v4 introduces new gradient capabilities, such as arbitrary angles (e.g., bg-linear-45) [1][3] and color interpolation modifiers (e.g., bg-linear-to-r/oklch or bg-linear-to-r/srgb) [5][3], which work seamlessly with the bg-linear-* syntax. If you are migrating a codebase, the official Tailwind CSS upgrade tool automatically handles the renaming of bg-gradient-to-* to bg-linear-to-* for statically parseable class strings [1][2].

Citations:

• 1: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
• 2: https://www.digitalapplied.com/blog/tailwind-css-v4-2026-migration-best-practices
• 3: https://tailwindcss.com/blog/tailwindcss-v4
• 4: https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/
• 5: https://tailwindcss.com/docs/background-image

🏁 Script executed:

rg -n 'hover:scale-\[1\.5\]' src

Repository: Smartlify07/Modern-Advocates

Length of output: 452

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== navbar snippet ==\n'
sed -n '45,130p' src/features/marketing/components/navbar.tsx

printf '\n== gradient utility search ==\n'
rg -n "bg-(gradient-to-r|linear-to-r)" src/features/marketing -g '*.tsx' -g '*.ts'

printf '\n== ArrowRight rotation search ==\n'
rg -n "rotate-\[-?30deg\]" src/features/marketing -g '*.tsx' -g '*.ts'

Repository: Smartlify07/Modern-Advocates

Length of output: 6440

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== package.json tailwind deps ==\n'
sed -n '1,220p' package.json

printf '\n== tailwind-related files ==\n'
fd -a 'tailwind*' .

printf '\n== tailwind config contents (if any) ==\n'
for f in $(fd -a 'tailwind.*(js|cjs|mjs|ts|config.*)' .); do
  echo "--- $f ---"
  sed -n '1,220p' "$f"
done

Repository: Smartlify07/Modern-Advocates

Length of output: 2351

🏁 Script executed:

#!/bin/bash
set -euo pipefail

python3 - <<'PY'
import json, pathlib
p = pathlib.Path('package.json')
data = json.loads(p.read_text())
for key in ('dependencies','devDependencies','peerDependencies','optionalDependencies'):
    deps = data.get(key, {})
    if any('tailwind' in k.lower() for k in deps):
        print(f'[{key}]')
        for k,v in deps.items():
            if 'tailwind' in k.lower():
                print(f'{k}: {v}')
PY

Repository: Smartlify07/Modern-Advocates

Length of output: 299

🌐 Web query:

Tailwind CSS v4 directional gradient utility bg-gradient-to-r bg-linear-to-r docs migration

💡 Result:

In Tailwind CSS v4, the directional gradient utilities have been renamed from bg-gradient-to-* to bg-linear-to-* to align with the underlying CSS linear-gradient() function and to accommodate new gradient types like bg-radial and bg-conic [1][2][3]. Migration details: - Renaming: All existing v3 bg-gradient-to-* classes must be updated to bg-linear-to-* (e.g., bg-gradient-to-r becomes bg-linear-to-r) [2][4]. - Automation: The official Tailwind CSS upgrade tool (npx @tailwindcss/upgrade``) automatically detects and rewrites these class names in your project files [1][2][3][5]. - Color Stops: The color stop utilities (from-*, `via-`, `to-`) and their modifiers (positions, opacity) remain unchanged and function exactly as they did in v3 [2][4][6]. - New Features: v4 introduces expanded capabilities for linear gradients, including support for arbitrary angles (e.g., `bg-linear-45`), new color interpolation modifiers (e.g., `/srgb`, `/oklch`), and support for radial and conic gradients [2][3][7][8]. It is recommended to run the automated upgrade command to handle these changes, as manual updates may miss dynamic or concatenated class strings [2][5].

Citations:

• 1: Template migrations: Migrate bg-gradient-* utilities to bg-linear-* tailwindlabs/tailwindcss#14537
• 2: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
• 3: https://tailwindcss.com/blog/tailwindcss-v4
• 4: https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/
• 5: https://blog.elunari.uk/tailwind-css-v4-migration-guide
• 6: https://stackoverflow.com/questions/71120394/is-there-a-way-to-adjust-the-angle-of-the-linear-gradient
• 7: https://designrevision.com/blog/tailwind-4-migration
• 8: https://raw.githubusercontent.com/tailwindlabs/tailwindcss.com/main/src/docs/background-image.mdx

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Tailwind-related files =="
git ls-files | rg 'tailwind|postcss|css$|package.json$|donut|marketing/components/(donation-support-section|contact-form-button)'

echo
echo "== Search for gradient utilities =="
rg -n --hidden --no-ignore-vcs 'bg-gradient-to-r|bg-linear-to-r|tailwind' src . -g '!node_modules' -g '!dist' -g '!build'

echo
echo "== Inspect package.json and Tailwind config files =="
for f in package.json tailwind.config.* postcss.config.* src/**/*.css src/**/*.tsx; do
  if [ -f "$f" ]; then
    echo "--- $f ---"
    sed -n '1,220p' "$f"
  fi
done

Repository: Smartlify07/Modern-Advocates

Length of output: 19289

🌐 Web query:

Tailwind CSS v4 bg-gradient-to-r bg-linear-to-r renamed gradient utilities alias removed

💡 Result:

In Tailwind CSS v4, the bg-gradient-to-* utilities have been replaced by bg-linear-to-* to better align with the underlying CSS linear-gradient() function [1][2]. Key changes in v4 include: 1. Renaming: All linear gradient utilities have been renamed from bg-gradient-to-* to bg-linear-to-* (e.g., bg-gradient-to-r becomes bg-linear-to-r) [1][3]. The legacy bg-gradient-* alias has been removed in the v4 release [1][3]. 2. Expanded API: In addition to the standard directional utilities (like bg-linear-to-r or bg-linear-to-tl), v4 introduces support for explicit angles (e.g., bg-linear-45) and arbitrary values (e.g., bg-linear-[125deg]) [1][4][2]. 3. Consistency: These changes are part of a broader expansion of gradient utilities, which now also include bg-radial and bg-conic [1][2]. 4. Functionality: The associated color stop utilities—from-*, via-*, and to-*—remain functionally identical to their v3 counterparts [1][3]. Additionally, v4 introduces modifiers for color interpolation (e.g., /srgb, /oklch), which can be appended to the gradient utility [5][2]. For those migrating from v3, replacing the bg-gradient-to- prefix with bg-linear-to- is required, as the old class names are no longer supported [1][3].

Citations:

• 1: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
• 2: https://tailwindcss.com/blog/tailwindcss-v4
• 3: https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/
• 4: tailwindlabs/tailwindcss@7b63886
• 5: https://tailwindcss.com/docs/background-image